@import 'variables';
@import "../authenticated-user-playlists-view/authenticated-user-playlists-view.style";

:host {
  .cp-grid{
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(120px, 1fr));
  }

  .grid-card {
    transition: transform 0.2s ease;
    .description {
      .title {
        font-size: 12px;
      }
    }

    &:hover{
      transform: scale(1.07);
    }

    &:active{
      .description{
        background: $brand-primary;
        color: white;
      }
    }
  }
}

